<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>jQuery中的ready方法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <style type="text/css" media="screen">
      body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em "微软雅黑";
      }

      h1 {
        color: green;
      }

      p {
        font-size: 20;
        padding: 5px 0;
      }
    </style>
    <script>
      $(document).ready(function () {
        console.log("document.ready()第一次触发");
      });
      // jQuery中的ready方法可以多次调用，互不冲突
      $(document).ready(function () {
        console.log("document.ready()第二次触发");
      });
      // $( document ).ready()可简写为$()。
      $(function () {
        console.log("document.ready()第一次触发");
      });

      window.onload = function () {
        console.log("window onload 事件第一次触发");
      };

      // window.onload事件多次调用会产生冲突，只执行最后一次的onload
      window.onload = function () {
        console.log("window onload 事件第二次触发");
      };
    </script>
  </head>

  <body>
    <h1>jQuery中的ready方法</h1>
    <iframe src="http://cn.bing.com"></iframe>
    <p>请打开控制台查看输出效果</p>
    <!-- <script src="js/jquery-1.11.3.min.js"></script> -->
    <!-- jQuery库引用位置如果放在这里，则之前的jQuery代码出错 -->
  </body>
</html>
